<template>
  <ul class="footer">
    <li @click="toIndex" :class="{ active: $route.path === '/index' }">
      <i class="fa fa-home"></i>
      <p>首页</p>
    </li>
    <li>
      <i class="fa fa-compass"></i>
      <p>发现</p>
    </li>
    <li @click="toBusinessInfo" :class="{ active: $route.path === '/businessInfo' }">
      <i class="fa fa-file-text-o"></i>
      <p>订单</p>
    </li>
    <li>
      <i class="fa fa-user-o"></i>
      <p>我的</p>
    </li>
  </ul>
</template>

<script>
export default {
  name: 'Footer',
  methods: {
    toIndex() {
      this.$router.push({ path: '/index' });
    },
    toBusinessInfo() {
      this.$router.push({ path: '/orders' }); // 修改为跳转到 /businessInfo
    }
  }
}
</script>

<style scoped>
.footer {
  width: 100%;
  height: 14vw;
  border-top: solid 1px #DDD;
  background-color: #fff;
  position: fixed;
  left: 0;
  bottom: 0;
  display: flex;
  justify-content: space-around;
  align-items: center;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
}

.footer li {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #999;
  user-select: none;
  cursor: pointer;
  transition: all 0.3s ease;
}

.footer li:hover {
  color: #409EFF; /* 饿了么主题色 */
}

.footer li.active {
  color: #409EFF; /* 饿了么主题色 */
}

.footer li p {
  font-size: 2.8vw;
  margin-top: 0.5vw;
  transition: all 0.3s ease;
}

.footer li i {
  font-size: 5vw;
  transition: all 0.3s ease;
}

.footer li:hover i,
.footer li.active i {
  transform: translateY(-5px);
}

.footer li:hover p,
.footer li.active p {
  transform: translateY(5px);
}
</style>